<template>
    <div class="fat">
        <form action="/">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" />
        </form>
        <section>
            <van-tabs v-model:active="active" @click-tab="yingren(active)">
                <van-tab title="影视">

                    <ul>
                        <li v-for="item in moves" :key="item.id" class="li1">
                            <div><img :src="item.poster" alt="" class="img1"></div>
                            <div class="box">
                                <section class="box1">{{ item.title }} </section><span class="haha">{{ item.rating
                                }}分</span>
                                <section class="box2">{{ item.year }}</section>
                                <section class="box2">{{ item.genres }}</section>
                                <section class="box2">{{ item.countries }}</section>

                            </div>
                        </li>
                    </ul>
                </van-tab>
                <van-tab title="影人">

                    <ul class="p1">
                        <li v-for="item in people" :key="item.id" class="box10">
                            <div class="zpl">
                                <section>
                                    <img :src="item.avatar" alt="" class="pic4">
                                </section>
                                <section class="right">
                                    <div class="fanle">{{ item.name }}</div>
                                    <div class="haole">{{ item.name_en }}</div>
                                    <div class="haole">{{ item.gender }}</div>
                                </section>
                            </div>



                        </li>
                    </ul>
                </van-tab>
                <van-tab title="角色"></van-tab>

            </van-tabs>
        </section>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            value: '',
            moves: '',
            active: '',
            people: '',
        }
    },
    methods: {
        yingren(a) {
            if (a == 1) {
                axios.get(`https://test-h5-api.ixook.com/search?keyword=${this.value}&type=actor`).then(res => {
                    console.log(res);
                    this.people = res.data.data
                })

            }
        },

        onSearch() {
            axios.get(`https://test-h5-api.ixook.com/search?keyword=${this.value}`).then(res => {
                // console.log(res);
                this.moves = res.data.data
                console.log(this.moves);
            })
            // console.log(value);

        }
    }
}
</script>
<style lang="scss" scoped>
.fat {
    background-color: #fff;
}

.right {
    margin-left: 10px;
}

.box10 {
    padding-left: 15px;
    width: 345px;
    height: 106px;
    border-bottom: #333;

    .fanle {
        padding-bottom: 0.10666667rem;
        font-size: 0.42666667rem;
        color: #333;
        line-height: 0.64rem;
    }

    .haole {
        font-size: 0.37333333rem;
        line-height: 0.61333333rem;
        color: #999;
    }


}

.zpl {
    display: flex;

    .pic4 {
        width: 67px;
        height: 90px;
    }
}

.box {
    float: left;
    margin-left: 10px;
    position: relative;

    .haha {
        position: absolute;
        top: 0;
        right: -70px;
        color: red;
    }

    .box2 {
        // padding-top: 0.16rem;
        height: 0.61333333rem;
        font-size: 0.32rem;
        color: #999;
    }
}

.li1 {
    width: 345px;
    height: 107px;
    display: flex;

    .box1 {
        font-size: 0.42666667rem;
        color: #333;
        white-space: nowrap;
        width: 206px;
        overflow: hidden;
        text-overflow: ellipsis;
        // display: flex;
        // position: absolute;


    }


    .img1 {
        width: 67px;
        height: 90px;
    }
}

::v-deep .van-tabs__nav {
    padding-right: 100px;
}

.li1[data-v-5fa0c7f8] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
</style>